<template>
    <div>
        <basic-container>
            <div class="app-container">
                <el-form :model="otherQuery" ref="queryForm" size="small" :inline="true">
                    <el-form-item label="工单名称">
                        <el-select style="width: 180px;" v-model="otherQuery.task_id" filterable remote reserve-keyword
                            placeholder="请输入关键词" :remote-method="querySearchAsync" :loading="loading" clearable
                            @clear="handleQuery">
                            <el-option v-for="item in restaurants" :key="item.task_id" :label="item.name"
                                :value="item.task_id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="机种名称">
                        <el-select style="width: 180px;" v-model="otherQuery.aircraft_id" placeholder="请选择">
                            <el-option v-for="item in roleOptions" :key="item.aircraft_id" :label="item.aircraft"
                                :value="item.aircraft_id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="设备名称">
                        <el-select style="width: 180px;" v-model="otherQuery.facility_id" placeholder="请选择" clearable>
                            <el-option v-for="item in menuList" :key="item.facility_id" :label="item.name"
                                :value="item.facility_id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                   
                    <!-- <el-form-item label="副码">
                        <el-input style="width: 180px;" v-model="otherQuery.code" placeholder="请输入副码" clearable />
                    </el-form-item> -->
                    <el-form-item label="产品SN">
                        <el-input style="width: 210px;" v-model="otherQuery.sequence" placeholder="请输入产品SN码"
                            clearable />
                    </el-form-item>
                    <el-form-item label="日期查询">
                        <el-date-picker style="width: 250px;" v-model="value" clearable type="daterange"
                            value-format="yyyy-MM-dd" range-separator="至" start-placeholder="开始日期"
                            end-placeholder="结束日期">
                        </el-date-picker>
                        <el-button style="margin-left: 20px;" type="primary" icon="el-icon-search" size="mini"
                            @click="handleQuery">搜索</el-button>
                    </el-form-item>
                </el-form>
                <el-row :gutter="10" class="mb8">
                    <el-col :span="1.5">
                        <el-button type="primary" plain icon="el-icon-download" size="mini"
                            @click="handleExport">导出</el-button>
                    </el-col>
                </el-row>

                <template>
                    <el-table :data="tableData" v-loading="loading" element-loading-text="拼命加载中"
                        element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)"
                        ref="table" style="width: 100%">
                        <el-table-column prop="aircraft" label="机种名称">
                            <template slot-scope="scope">
                                <div>{{ scope.row.aircraft }}</div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="sequence" label="产品编码" align="center">
                            <template slot-scope="scope">
                                <div>{{ scope.row.sequence }}</div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="facility_name" label="设备名称" align="center">

                            <template slot-scope="scope">
                                <div>{{ scope.row.facility_name }}</div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="numbers" label="加工次数" align="center">
                        </el-table-column>
                        <!-- <el-table-column label="测试最终数据" prop="db_message_resp" align="center" width="240">
                            <template slot-scope="scope">
                                <div v-if="scope.row.db_message_resp.length > 2 && scope.row.offShow">
                                    <el-row>
                                        <el-col :span="12"><el-checkbox v-model="scope.row.db_message_resp[0].isBoole">

                                            </el-checkbox>{{ scope.row.db_message_resp[0].key }}</el-col>
                                        <el-col :span="12">{{ scope.row.db_message_resp[0].value }}</el-col>
                                        <el-col :span="12">
                                            <el-checkbox
                                                v-model="scope.row.db_message_resp[1].isBoole"></el-checkbox>{{
                    scope.row.db_message_resp[1].key }}</el-col>
                                        <el-col :span="12">{{ scope.row.db_message_resp[1].value }}</el-col>
                                        <span style="color: #409eff;font-size: 12px;cursor: pointer;"
                                            @click="openTable(scope, $event)">展开</span>
                                    </el-row>
                                </div>
                                <div v-else>
                                    <el-row v-for="(item, index) in scope.row.db_message_resp" :key="index">
                                        <el-col :span="12"><el-checkbox v-model="item.isBoole"></el-checkbox>{{
                    item.key }}</el-col>
                                        <el-col :span="12">{{ item.value }}</el-col>
                                    </el-row>
                                    <span style="color: #409eff;font-size: 12px;cursor: pointer;"
                                        @click="openTable(scope, $event)"
                                        v-if="scope.row.db_message_resp.length > 2">收起</span>
                                </div>
                            </template>

                        </el-table-column> -->
                        <el-table-column prop="mark" label="是否合格" align="center">
                            <template slot-scope="scope">
                                <div>{{ scope.row.mark }}</div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="error" label="不合格原因" align="center" width="150">
                            <template slot-scope="scope">
                                <div>{{ scope.row.error }}</div>
                            </template>
                        </el-table-column> 
                        <el-table-column prop="grade" label="打码等级" align="center">
                            <template slot-scope="scope">
                                <div>{{ scope.row.grade }}</div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="option" label="操作员工" align="center">

                            <template slot-scope="scope">
                                <div>{{ scope.row.option }}</div>
                            </template>
                        </el-table-column>
                        
                        <!-- <el-table-column prop="code" label="副码" align="center">
                            <template slot-scope="scope">
                                <div>{{ scope.row.code }}</div>
                            </template>
                        </el-table-column> -->
                        <!-- <el-table-column prop="grade" label="评估等级" align="center">
                            <template slot-scope="scope">
                                <div>{{ scope.row.grade }}</div>
                            </template>
                        </el-table-column> -->
                        <el-table-column prop="start" label="开始时间" align="center">
                            <template slot-scope="scope">
                                <div>{{ scope.row.start }}</div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="finish" label="完成时间" align="center">
                            <template slot-scope="scope">
                                <div>{{ scope.row.finish }}</div>
                            </template>
                        </el-table-column>

                    </el-table>
                </template>

            </div>
            <pagination v-show="toNum > 0" :total="toNum" :page.sync="otherQuery.index" :limit.sync="otherQuery.size"
                @pagination="gitMeassList" />
        </basic-container>
        <el-dialog title="cpk计算" :visible.sync="CpkdialogVisible" width="80%">
            <div style="display: flex;">
                <div v-for="(item, index) in Cpklist" :key="index">
                    <div style="margin:0 20px;text-align: center;">
                        <div style="margin: 5px 0;">{{ item.key }}</div>
                        <div>{{ item.value }}</div>
                    </div>
                </div>
            </div>

            <span slot="footer" class="dialog-footer">
                <el-button @click="CpkdialogVisible = false">取 消</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import {
    getkindList,
    getdetails,
    getdkind,
    getdTaskkind
} from "@/api/data";

export default {
    data() {
        return {

            CpkdialogVisible: false,
            Cpklist: [],
            checked: false,
            roleOptions: [],
            cpkNumbe: 1,
            NubIndex: null,
            produInd: null,
            tabPosition: "left",
            tableData: [],
            productData: [],

            propObj: {
                multiple: true,
                value: "mark",
                label: "label",
                children: "children",
            },
            loading: false,
            towLad: false,
            showSearch: true,
            value1: [],
            total: 1,
            inMess: [],
            menuList: [],
            options: [
                {
                    value: "1",
                    label: "生效中",
                },
                {
                    value: "2",
                    label: "禁用",
                },
                {
                    value: "3",
                    label: "审核中",
                },
            ],
            // 弹出层标题
            title: "",
            open: false,
            toNum: 0,
            isExpandAll: false,
            restaurants: [],
            activeName: null,
            refreshTable: true,
            otherQuery: {
                facility_id: null,
                task_id: null,
                aircraft_id: null,
                start: null,
                finish: null,
                sequence: null,
                code: null,
                index: 1,
                size: 10,
            },
            queryParams: {
                index: 1,
                size: 1000,
            },
            value: null,
            form: {},
            rules: {
                role: [
                    { required: true, message: "角色名称不能为空", trigger: "blur" },
                ],
                describe: [
                    { required: true, message: "角色描述不能为空", trigger: "blur" },
                ],
            },
        };
    },
    created() {

    },
    computed: {

    },

    mounted() {
        function formatDate(date) {
            const year = date.getFullYear();
            const month = (date.getMonth() + 1).toString().padStart(2, '0');
            const day = date.getDate().toString().padStart(2, '0');
            return `${year}-${month}-${day}`;
        }
        // 获取今天的日期
        const today = new Date();
        // 获取前三个月的日期
        const threeMonthsAgo = new Date(today);
        threeMonthsAgo.setMonth(today.getMonth() - 3);
        // 格式化日期为 "yyyy-MM-dd"
        const formattedToday = formatDate(today);
        const formattedThreeMonthsAgo = formatDate(threeMonthsAgo);
        this.queryParams.start = formattedThreeMonthsAgo
        this.queryParams.finish = formattedToday
        this.value = [formattedThreeMonthsAgo, formattedToday]
        this.getList()
        this.getdkindList();
        // this.firstQuery();
    },
    methods: {
        getList() {
            getkindList(this.queryParams).then((response) => {
                this.menuList = response.data.data;
                this.firstQuery()
            });
        },

        openTable(row, event) {
            if (event.target.textContent == '展开') {
                this.tableData[row.$index].offShow = false
            } else {
                this.tableData[row.$index].offShow = true
            }

        },
        handleExport() {
            this.$confirm('是否将数据导出为EXcel文档？').then(() => {
                const params = new URLSearchParams();
                this.value == null ? '' : params.append('start', this.value[0]);
                this.value == null ? '' : params.append('finish', this.value[1]);
                this.otherQuery.sequence == null ? '' : params.append('sequence', this.otherQuery.sequence);
                this.otherQuery.aircraft_id == null ? '' : params.append('aircraft_id', this.otherQuery.aircraft_id);
                this.otherQuery.facility_id == null ? '' : params.append('facility_id', this.otherQuery.facility_id);
                this.otherQuery.task_id == null ? '' : params.append('task_id', this.otherQuery.task_id);
                const url = new URL('http://192.168.20.252:8080/api/query/station/output');
                url.search = params.toString();
                window.location.href = url.toString();
            })
        },


        firstQuery() {
            (this.otherQuery = {
                facility_id: null,
                task_id: null,
                aircraft_id: null,
                start: null,
                finish: null,
                code: null,
                index: 1,
                size: 10,
            }),
                this.otherQuery.start = this.value == null ? null : this.value.length > 0 ? this.value[0] : null
            this.otherQuery.finish = this.value == null ? null : this.value.length > 0 ? this.value[1] : null
            this.gitMeassList();
        },
        gitMeassList() {
            this.otherQuery.start = this.value == null ? null : this.value.length > 0 ? this.value[0] : null
            this.otherQuery.finish = this.value == null ? null : this.value.length > 0 ? this.value[1] : null
            this.loading = true;
            getdetails(this.otherQuery).then((res) => {
                let data = res.data;
                // 检查 data 是否是字符串，并尝试解析它
                if (typeof data === 'string') {
                    // 清理无效数据
                    data = data.replace(/NaN/g, 'null'); // 将 NaN 替换为 null 或其他有效的 JSON 值

                    try {
                        data = JSON.parse(data);
                    } catch (e) {
                        console.error('JSON parsing error:', e);
                        // 处理解析错误的情况
                        return;
                    }

                    this.tableData = data.data;
                    this.tableData.forEach(item => {
                        item.db_message_resp.forEach(obj => {
                            this.$set(obj, 'isBoole', false)
                        });
                    });
                    this.tableData = this.tableData.map(item => {
                        return { ...item, offShow: true };
                    });

                    this.loading = false;
                } else {
                    this.tableData = data.data;
                    this.tableData.forEach(item => {
                        item.db_message_resp.forEach(obj => {
                            this.$set(obj, 'isBoole', false)
                        });
                    });
                    this.tableData = this.tableData.map(item => {
                        return { ...item, offShow: true };
                    });
                    this.toNum = res.data.total;
                    this.loading = false;
                }
            });

        },
        handleQuery() {
            this.value = this.value == null ? [] : this.value;
            let queryData = {
                index: this.otherQuery.index,
                size: this.otherQuery.size,
                start: this.value.length > 0 ? this.value[0] : null,
                finish: this.value.length > 0 ? this.value[1] : null,
                facility_id: this.otherQuery.facility_id,
                task_id: this.otherQuery.task_id,
                aircraft_id: this.otherQuery.aircraft_id,
                sequence: this.otherQuery.sequence,
                code: this.otherQuery.code,
            };
            console.log(queryData);

            getdetails(queryData).then((res) => {
                this.tableData = res.data.data;
                this.tableData.forEach(item => {
                    item.db_message_resp.forEach(obj => {
                        this.$set(obj, 'isBoole', false)
                    });
                });
                this.tableData.forEach(item => {
                    item.db_message_resp = item.db_message_resp.slice(0, 2);
                });
                this.toNum = res.data.total;
            });
        },



        getdkindList() {
            getdkind().then((res) => {
                this.roleOptions = res.data.data;
            });
        },
        querySearchAsync(queryString) {
            if (queryString == null) return;

            let quey = {
                name: queryString,
            };
            getdTaskkind(quey).then((res) => {

                this.restaurants = res.data.data;
            });
        },
    },
};
</script>

<style lang="scss" scoped>
// .table-container {

//     /* 设置一个具体的宽度，或者限制最大宽度 */
//     max-width: 100%;
//     /* 示例值，你可以根据需要调整 */
//     overflow-x: auto;
//     /* 当内容超出时允许横向滚动 */
// }

// /* 如果Element UI的样式没有自动添加滚动条，你可以尝试添加以下样式 */
// .el-table__body-wrapper {
//     overflow-x: auto !important;
//     /* 强制显示横向滚动条 */
// }

.message {
    width: 198%;
    background: #f8f8f9;
    display: flex;
    overflow-x: scroll;
}

.activeClass {
    color: red;
}


</style>

<style lang="scss">
/* 全局滚动条样式 - 不使用scoped以确保生效 */
::-webkit-scrollbar {
    width: 12px !important; /* 垂直滚动条宽度 */
    height: 20px !important; /* 横向滚动条高度 - 加粗 */
}

::-webkit-scrollbar-track {
    background: #f1f1f1 !important; /* 滚动条轨道背景色 */
    border-radius: 10px !important; /* 增加圆角 */
}

::-webkit-scrollbar-thumb {
    background: #c1c1c1 !important; /* 滚动条滑块颜色 */
    border-radius: 10px !important; /* 增加圆角 */
    border: 3px solid #f1f1f1 !important; /* 给滑块添加边框使其看起来更粗 */
}

::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8 !important; /* 鼠标悬停时的颜色 */
}

/* 针对表格滚动条的特殊设置 */
.el-table .el-table__body-wrapper::-webkit-scrollbar {
    width: 15px !important; /* 表格垂直滚动条 */
    height: 25px !important; /* 表格横向滚动条更粗 */
}

.el-table .el-table__body-wrapper::-webkit-scrollbar-track {
    background: #f5f5f5 !important;
    border-radius: 12px !important;
}

.el-table .el-table__body-wrapper::-webkit-scrollbar-thumb {
    background: #909399 !important; /* 表格滚动条颜色 */
    border-radius: 12px !important; /* 增加圆角 */
    border: 4px solid #f5f5f5 !important; /* 增加边框厚度 */
}

.el-table .el-table__body-wrapper::-webkit-scrollbar-thumb:hover {
    background: #606266 !important;
}

/* 专门针对横向滚动条的优化 */
::-webkit-scrollbar:horizontal {
    height: 22px !important; /* 横向滚动条特别加粗 */
}

.el-table .el-table__body-wrapper::-webkit-scrollbar:horizontal {
    height: 22px !important; /* 表格横向滚动条最粗 */
}

/* 确保表格容器有横向滚动 */
.el-table .el-table__body-wrapper {
    overflow-x: auto !important;
}

.el-table {
    overflow: visible !important;
}
</style>
